<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景一：图片与文字环绕</title>
		<style>
			p{
				border: 1px solid red;
				float: left;
				font-size: 16px;/* 页面文字默认大小：16px */
				line-height: 20px; /* 浮动p块元素，内容行内元素*/
				/* 结论：文本不能浮动，特点：块包行 */
			}
			img{
				border: 10px solid red;
				float: right;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景一：图片与文字环绕</h1>
		<img src="img/maomao.jpg" alt="maomao" width="250px" height="250px/>
		<img src="img/coser.png" alt="coser" width="250px" height="250px"/>
		<!-- P元素：独占一行可设高宽，块元素 -->
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae cumque consectetur et dolore quod obcaecati tempore, atque odit ad mollitia officiis vero dolor inventore quia, illo ullam ipsum, libero nemo? Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat voluptates, accusantium sint quam itaque dolorum autem eligendi. Doloribus corporis vitae omnis cupiditate odio quasi a, reiciendis, commodi veniam eaque perferendis! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore porro omnis rem quae fugiat suscipit maiores, molestias esse. Suscipit, quam. Omnis et, aperiam laboriosam nisi vitae rem blanditiis fuga sunt!</p>
	</body>
</html>